<template>
  <div>
      <div class="xiang">
          <!-- <img :src="allde[0].img"> -->
          <van-swipe @change="onChange">
          <van-swipe-item><img :src="allde[0].img"></van-swipe-item>
          <van-swipe-item><img :src="allde[0].img1"></van-swipe-item>
          <van-swipe-item><img :src="allde[0].img2"></van-swipe-item>
          <van-swipe-item><img :src="allde[0].img3"></van-swipe-item>
          <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
          </van-swipe>
          <!-- <h1>{{allde}}</h1> -->
          <div class="sss">
              <span class="iconfont icon-jiantou_xiangzuo op1" @click="fun()"></span>
              <span class="iconfont iiq icon-aixinshangchengshouye"></span>
              <span class="iconfont iiq icon-jian"></span>
              <span class="iconfont iiq icon-shangjiantou_huaban"></span>
          </div>
          <!-- 红色 -->
          <div class="sss1">
              <div class="left">
                  <p class="le_p">品质购房季&nbsp;&gt;</p>
                  <span class="le_s">3万津贴抽不停，点我直达→</span>
              </div>
              <div class="right">
                  <p class="re_p">距离结束还剩25天</p>
                  <div class="re_di">
                    <van-count-down :time="36000000">
                    <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                    </template>
                    </van-count-down>
                  </div>
              </div>
          </div>
          <!-- 名称 -->
          <h2 class="he2">{{allde[0].title}}<span class="iconfont icon-aixin"></span></h2>
          <!--  -->
          <div class="zai">
              <span>在售</span>
              <span>{{allde[0].tu}}</span>
              <span>{{allde[0].nq}}</span>
              <span>{{allde[0].nw}}</span>
              <span>{{allde[0].nr}}</span>

          </div>
          <!--  -->
          <div class="price">
              <div class="pri_p">
                  <p v-red>{{allde[0].price}}</p>
                  <span>参考单价</span>
              </div>
              <div class="pri_p">
                  <p>280-400(万/套)</p>
                  <span>参考总价</span>
                  <span class="iconfont iiv icon-wenhao"></span>
              </div>
              <div class="pri_p">
                  <p>3/4居</p>
                  <span>主力户型</span>
              </div>
          </div>
          <!--  -->
          <div class="tu">
              <p><span>用途:<b>住宅</b></span><span class="chan">产权:<b>70年</b></span><span class="iconfont iiv icon-wenhao"></span><span class="rrii">></span></p>
              <p><span>地址:<b>玮二十六路与西太路交汇处东北角</b></span><span class="rrii">></span></p>
          </div>
          <!-- 变价提醒 -->
          <div class="bian">
              <span class="oo_bian">
                  <span class="iconfont icon-shuzhou"></span>
                  变价提醒
              </span>
              <span class="oo_bian">
                  <span class="iconfont icon-lingdang1"></span>
                  开盘提醒
              </span>
          </div>
          <!-- 购房津贴 -->
          <div class="jin">
              <p class="i_p">30000</p>
              <div class="jin_pp">
                  <div class="b_p">
                      <b>买房津贴卷</b>
                      <p>可叠加楼盘优惠</p>
                  </div>
                  <span class="anp">立抢</span>
              </div>
          </div>
          <!-- 末尾资讯 -->
          <div class="foot">
              <span class="sdp">电话资讯</span>
              <span class="sdp">在线资讯</span>
          </div>
      </div>
  </div>

</template>

<script>
export default {

    data(){
        return{
            current: 0,
            allde:[]
        }
    },
    methods:{
        fun(){
            this.$router.go(-1)
        },
        onChange(index) {
            this.current = index;
        },
    },
    directives:{
        red:{
            inserted(el){
                el.style.color="#d53c3c"
            }
        },
    },
    computed:{
        arr(){
            // console.log(this.$store.state.er1m.data);
            return this.$store.state.er1m.arr
        }
    },
    beforeMount(){
        // console.log(this.$route.query.goodids);

        this.allde=this.arr.filter((v)=>{
            if(v.goodid==this.$route.query.goodids){
                return v
            }
            // console.log(this.allde);
        })

    },
    //解决数据刷新丢失

    created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }

}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
img{
	vertical-align: top;
}

.xiang{
    width: 100%;
    height: 2.5rem;
    /* background: yellowgreen; */
    position: relative;
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 15px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}
.van-swipe{
    height: 2.5rem;
}
.xiang img{
    width: 100%;
    height: 100%;
}
.xiang .sss span{
    color: white;
    font-size: .3rem;
    line-height: .5rem;
}
.xiang .sss .iiq{
    margin-right: .15rem;
}
.xiang .sss .op1{
    margin-left: .2rem;
    margin-right: 2.25rem;
}
.xiang .sss{
    width: 100%;
    height: .5rem;
    /* border: 1px solid red; */
    display: flex;
    position: absolute;
    left: 0;
    top: .08rem;
}
.xiang .sss1{
    width: 100%;
    height: .62rem;
    background: #eb4932;
    /* background: palegreen; */
    display: flex;
}
.sss1 .left{
    width: 60%;
    height: 100%;
    /* border:  1px solid blue; */
    padding-left: .2rem;
}
.sss1 .left .le_p{
    height: .30rem;
    line-height: .3rem;
    font-size: .16rem;
    color: white;
    font-weight: bold;
    letter-spacing: .02rem;
}
.sss1 .right .re_p{
    line-height: .3rem;
    font-size: .14rem;
    color: white;
}
.sss1 .left .le_s{
    font-size: .14rem;
    color: white;
}
.sss1 .right{
    width: 40%;
    height: 100%;
    /* border:  1px solid blue; */
}
.sss1 .right .re_di{
    width: 1.26rem;
    height: .3rem;
    /* border: 1px solid; */
    margin-left: .08rem;
    margin-top: .25rem;
}
.sss1 .right .colon {
    display: inline-block;
    margin: .03rem 0;
    font-size: .15rem;
    text-align: center;
    color: white;
  }
.sss1 .right .block {
    display: inline-block;
    width: .22rem;
    color: #fff;
    font-size: .12rem;
    text-align: center;
    border-radius: .03rem;
    background-color: orange;
}
.sss1 .right span{
    width: .2rem;
    height: .2rem;
}
.he2{
    width: 88%;
    height: .6rem;
    /* background: yellowgreen; */
    padding:  0 .25rem;
    line-height: .6rem;
    display: flex;
    justify-content: space-between;
}
.zai{
    width: 90%;
    margin: auto;
    height: .26rem;
}
.zai span{
    padding: 5px 6px;
    font-size: .12rem;
    margin-right: .05rem;
    background: #f5f5f5;
    border-radius: .01rem;
}
.zai span:first-child{
    background: #d53c3c;
    color: white;
}
.price{
    width: 90%;
    height: .66rem;
    margin: auto;
    /* background: violet; */
    display: flex;
}
.price .pri_p{
    width: 33%;
    height: 100%;
    /* border: 1px solid red; */
}
.price .pri_p p{
    height: .4rem;
    line-height: .6rem;
    font-size: .14rem;
    font-weight: bold;
    color: black;
}
.price .pri_p span{
    font-size: .13rem;
    color: #808080;
}
.price .pri_p .iiv{
    font-size: .15rem;
}
.tu{
    width: 90%;
    height: .6rem;
    margin: auto;
    /* background: pink; */
}
.tu p{
    width: 100%;
    height: 50%;

}
.tu p span{
    font-size: .15rem;
    color: #808080;
}
.tu p span b{
    color: black;
    margin-left: .1rem;
    font-size: .15rem;
}
.tu p .chan{
    margin-left: 1rem;
}
.tu p .iiv{
    font-size: .17rem;
}
.tu p .rrii{
    float: right;
    color: #808080;
    font-size: .19rem;
}
.bian{
    width: 90%;
    height: .5rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
.bian .oo_bian{
    /* width: 30%   ; */
    height: .15rem;
    font-size: .16rem;
    color: #ca0b0b;
    padding: .17rem .45rem;
    background: #fcf0f0;
    border-radius: .06rem;
}
.jin{
    width: 90%;
    height: .5rem;
    margin: auto;
    background: #fefbfb;
    /* background: orange; */
    display: flex;
    padding-top: 8px;
}
.jin .i_p{
    width: 30%;
    height: 100%;
    /* border: 1px solid red; */
    color: #d63f3f;
    font-weight: bold;
    text-align: center;
    line-height: .65rem;
    font-size: .17rem;
}
.jin .jin_pp{
    width: 70%;
    height: 100%;
    /* border: 1px solid blue; */
    display: flex;
    justify-content: space-between;
}
.jin .jin_pp .anp{
    width: .66rem;
    height: .3rem;
    background: #d53c3c;
    color: white;
    font-size: .12rem;
    text-align: center;
    line-height: 30px;
    border-radius: .04rem;
    margin-top: .08rem;
    margin-right: .12rem;
}
.jin .jin_pp .b_p{
    width: 1.2rem;
    height: .45rem;
    /* border: 1px solid purple; */
    padding-left:.17rem;
}
.jin .jin_pp .b_p b{
    font-size: .14rem;
}
.jin .jin_pp .b_p p{
    font-size: .13rem;
    color: #747676;
    margin-top: .05rem;
}
.foot{
    width: 90%;
    height: .5rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
.foot .sdp{
    height: .15rem;
    font-size: .16rem;
    color: white;
    padding: .18rem .55rem;
    background: #fcf0f0;
    border-radius: .06rem;
    background: #0d9089;
}
.foot .sdp:first-child{
    background: #d53c3c;
}
</style>
